<template>
  <van-nav-bar
    :title="title"
    :left-text="leftText"
    :right-text="rightText"
    :left-arrow="showLeftArrow"
    :fixed="fixed"
    :placeholder="placeholder"
    :safe-area-inset-top="safeAreaInsetTop"
    @click-left="handleClickLeft"
    @click-right="handleClickRight"
  >
    <template #left>
      <slot name="left">
        <div v-if="showHomeButton" class="home-button" @click="goHome">
          <van-icon name="wap-home-o" size="18" />
          <span class="home-text">首页</span>
        </div>
      </slot>
    </template>
    <template #right>
      <slot name="right" />
    </template>
  </van-nav-bar>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

interface Props {
  title?: string
  leftText?: string
  rightText?: string
  showLeftArrow?: boolean
  showHomeButton?: boolean
  fixed?: boolean
  placeholder?: boolean
  safeAreaInsetTop?: boolean
}

interface Emits {
  (e: 'clickLeft'): void
  (e: 'clickRight'): void
}

const props = withDefaults(defineProps<Props>(), {
  title: '',
  leftText: '',
  rightText: '',
  showLeftArrow: false,
  showHomeButton: false,
  fixed: true,
  placeholder: true,
  safeAreaInsetTop: true
})

const emit = defineEmits<Emits>()
const router = useRouter()

const handleClickLeft = () => {
  if (props.showLeftArrow) {
    router.back()
  }
  emit('clickLeft')
}

const handleClickRight = () => {
  emit('clickRight')
}

const goHome = () => {
  router.push('/')
}
</script>

<style scoped>
.home-button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  backdrop-filter: blur(4px);
}

.home-button:active {
  opacity: 0.7;
  background: rgba(255, 255, 255, 0.25);
}

.home-text {
  font-size: 14px;
  font-weight: 500;
}

:deep(.van-nav-bar) {
  background: linear-gradient(135deg, #1E90FF 0%, #87CEEB 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
}

:deep(.van-nav-bar)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  transform: translateX(-100%);
  animation: navShine 4s ease-in-out infinite;
}

@keyframes navShine {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

:deep(.van-nav-bar__title) {
  font-weight: 600;
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 1;
}

:deep(.van-nav-bar__left),
:deep(.van-nav-bar__right) {
  position: relative;
  z-index: 1;
}

:deep(.van-nav-bar__right .van-icon) {
  color: white;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}
</style>